<style type="text/css">
    #hr-tag-add {
        padding: 20px 25px 25px 0;
    }
</style>
<!-- 注意id属性每个页面id必须独立-->
<div class="layui-fluid" id="hr-tag-add">
    <!--注意lay-filter属性，该属性为form表单唯一属性-->
    <form class="layui-form" action="" lay-filter="hr-tag-add-form">
        <!-- layui-form-item为自适应长度样式 -->
        <div class="layui-form-item">
            <!-- 表单页左侧label -->
            <label class="layui-form-label febs-form-item-require">标注名称</label>
            <!-- layui-input-block为整行宽度样式 -->
            <div class="layui-input-block">
                <!-- minlength为最小长度、 maxlength为最大长度-->
                <!-- autocomplete默认填写off,此项为配置使用缓存读取历史记录-->
                <!-- lay-verify为表单验证属性：required：必填项、range于minlength，maxlength公用， character不能输入特殊字符-->
                <!-- 详细表单验证请参考：resources\static\febs\lay\modules\validate.js-->
                <input type="text" name="tagName" minlength="2" maxlength="20" lay-verify="required|range|name|character"
                       autocomplete="off" class="layui-input repetitive" id="hr-tag-add-tagName">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label febs-form-item-require">备注</label>
            <div class="layui-input-block">
                <textarea name="remark" minlength="2" maxlength="20"
                       lay-verify="required|range|name|character"
                       autocomplete="off" class="layui-input repetitive" id="hr-tag-add-remark"/>
            </div>
        </div>
        <!-- 此页面为弹出页面，此处将本页面的提交按钮和重置按钮隐藏，使用febs-hide样式-->
        <div class="layui-form-item febs-hide">
            <!--lay-filter为按钮点击过滤器  注意id配置，为在父页面点击所获取的id-->
            <button class="layui-btn" lay-submit="" lay-filter="hr-tag-add-submit"
                    id="hr-tag-add-submit-btn"></button>
            <button type="reset" class="layui-btn" id="hr-tag-add-reset-btn"></button>
        </div>
    </form>
</div>

<script>
    layui.use(['febs', 'form', 'validate','upload'], function () {
        let $ = layui.$,
            febs = layui.febs,
            layer = layui.layer,
            // 表单
            form = layui.form,
            // 验证
            validate = layui.validate;
        // 进行表单验证
        form.verify(validate);
        // 渲染表单
        form.render();
        // hr-tag-add-submit 为上方提交按钮的过滤器名称
        form.on('submit(hr-tag-add-submit)', function (data) {
            // data.field为当前form表单的josn数据
            febs.post(ctx + 'tag/add', data.field, function () {
                // 关闭所有弹出窗体
                layer.closeAll();
                // 弹出成功消息
                febs.alert.success('新增成功');
                // 点击父页面查询按钮
                $('#hr-tag').find('#hr-tag-query-btn').click();
            });
            return false;
        });
    });
</script>